<!--<script src="../js/jquery-1.9.1.js"></script>-->
<% layout('/layouts/default.html', {title: '拍照', libs: ['dataGrid']}){ %>

<div>
    <form id="pictureForm" enctype="multipart/form-data" action="${ctx}/sd/collectPicture/uploadFile" method="post"
          class="form-horizontal">
        <div id="preview" class="submit">
            <div>预览</div>
            <canvas id="canvas" width="550" height="500"></canvas>
            <button type="button" id="again" style="margin: 10px;">重拍</button>
        </div>
        <div id="camera" class="video">
            <div>摄像头</div>
            <video id="video" controls>
            </video>
            <div style="text-align: center;">
                <button type="button" id="capture" style="margin: 10px;">拍照</button>
            </div>
        </div>
    </form>
</div>
<% } %>

<style type="text/css">
    #video {
        margin: 0 auto;
        display: block;
        width: 550px;
        height: 500px;
        background: #000;
        border-radius: 5px;
    }

    .video {
        text-align: center;
    }

    .submit {
        text-align: center;
        display: none;
    }

    #canvas {
        margin: 0 auto;
        display: block;
        background: rgb(248, 246, 231);
        border-radius: 5px;
    }
</style>

<script>
    $('#file').focus();

    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    };

    let url;
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    let fileSteam;
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({
            video: {
                width: 550,
                height: 500
            }
        }, success, error);
    } else {
        js.showMessage('不支持访问用户媒体');
    }
    ;

    // 上传图片
    // $("#submitPicture").click(function () {
    //     var formData = new FormData;
    //     formData.append("file", fileSteam)
    //     $.ajax({
    //         type: "POST",
    //         url: "${ctx}/sd/collectPicture/uploadFile",
    //         data: formData,
    //         contentType: false,
    //         processData: false,
    //         success: function (data) {
    //             js.showMessage(data.message);
    //         }
    //     })
    // });

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;

        //将视频流设置为video元素的源
        // video.src = CompatibleURL.createObjectURL(stream);

        video.srcObject = stream;
        video.play();


        // 截图
        document.getElementById('capture').addEventListener('click', function () {
            document.getElementById('camera').style.display = 'none';
            document.getElementById('preview').style.display = 'block';
            context.drawImage(video, 0, 0, 550, 500);
             url = canvas.toDataURL('image/png', 1);
            let arr = url.split(','),
                fileType = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                l = bstr.length,
                u8Arr = new Uint8Array(l);

            while (l--) {
                u8Arr[l] = bstr.charCodeAt(l);
            }
            fileSteam = new File([u8Arr], {
                type: fileType
            });

        });
    };

    function error(error) {
        js.layer.msg("检测不到摄像头设备，请检查是否接入设备或刷新页签重试", {icon: 5})
        // js.showMessage("调用媒体失败，请检查是否接入媒体设备或刷新页签重试", "", "", 10000);
        console.log("调用媒体失败..." + error);

        document.getElementById('capture').addEventListener('click', function () {
            js.layer.msg("检测不到摄像头设备，请检查是否接入设备或刷新页签重试", {icon: 5})
        });
    };


    document.getElementById('again').addEventListener('click', function () {
        document.getElementById('camera').style.display = 'block';
        document.getElementById('preview').style.display = 'none';
    });

    function getFile() {
        return fileSteam;
    }

    function getUrl() {
        return url;
    }
</script>
